<template>
	<div style="padding: 30px 40px">
		<div class="dis" style="justify-content: space-between">
			<div class="foSi14">已编号储物柜<span class="greens">{{ tips.all }}</span>个，已占用<span
					class="greens">{{ tips.use }}</span>个，可用<span class="greens">{{ tips.notuse }}</span>个</div>
			<div>
				<el-button v-if="!showdel" type="info" size="small" @click="showdel = !showdel">删除</el-button>
				<el-button v-else type="success" size="small" @click="showdel = !showdel">完成</el-button>
			</div>
		</div>
		<div class="dis disAl">
			<div><i class="el-icon-warning" style="color: #6b7cdd;font-size: 18px" /></div>
			<div class="foSi12 mar-left5" style="color: #6b7cdd">双击未占用的储物柜空白区域，可编辑储物柜编号</div>
		</div>
		<div v-loading="loading" class="mar-top10 dis" style="flex-wrap: wrap;">
			<div v-for="(item,index) in list" :key="index" class="item2 dis disJuC poRel borRad50">
				<div>
					<div class="foSi14 dis disJuB wid100">
						<span>{{ item.numbers_text }}</span>
					</div>
					<div class="foSi14 mar-top5">{{ item.status_text }}</div>
					<div v-show="!showdel" class="mar-top10 usebtn cuPo" @click="uselock(index)">使用</div>
					<div v-show="showdel" class="mar-top10 usebtn cuPo" @click="del_locker(item.id)">删除</div>
				</div>
				<div class="ri poAbs cuPo" />
				<!-- <span v-show="showdel" class="fowe800 coFFF foSi22 poAbs cuPo" style="top: 5px;right: 15px;"
					@click="del_locker(item.id)">×</span> -->
			</div>
			<div class="item2 dis disAl disJuC cuPo fleDir borRad50" style="background-color: #ededed;color: #000;"
				@click="add_locker">
				<div class="foSi14"><i class="el-icon-circle-plus" style="font-size: 26px;color: #6b7cdd;" /></div>
				<div class="foSi14 mar-top5">新增储物柜</div>
			</div>
		</div>

		<div v-if="shuaVisible" class="zhezhao wh100" />
		<div v-if="shuaVisible" v-loading="loading" class="zhezhaoN dis disAl disJuC wh100">
			<div class="poRel borRad10 bacFFF" style="width: 322px;">
				<div class="wid90 mar">
					<div class="wid100 dis disAl disJuB" style="padding: 30px 0 10px;">
						<div class="dis disAl">
							<div class="foSi20 fowe600 mar-right10">新增储物柜</div>
						</div>
						<svg-icon icon-class="guanbi" class="mar0 cuPo" style="color: #ACACAC;width: 24px;height: 24px;"
							@click.stop="add_locker" />
					</div>
					<div class="" style="padding: 20px 0;">
						<el-form ref="ruleForm" :model="ruleForm" :rules="rules">
							<div class="dis disAl disJuB" style="flex-wrap: wrap">
								<div class="dis disAl disJuB hei44 itFor ites" style="">
									<div style="margin-right: 20px;">
										<span class="foSi10" style="color: #ff0000;margin-right: 4px;">*</span>
										<span class="foSi14">编号</span>
									</div>
									<el-form-item class="mp0" prop="name">
										<el-input v-model.number="ruleForm.numbers"
											style="width: 200px;margin-left: 20px;" placeholder="请输入场馆名称1~20个字符内"
											class="mar0 kcTime" />
									</el-form-item>
								</div>
							</div>
						</el-form>
					</div>
					<div class="wid100 dis disAl disJuC foSi14 coFFF" style="padding: 20px 0 40px">
						<div class="mar-right20 que cuPo" style="background: #48a9f3;"
							@click.stop="submitForm('ruleForm')">保存</div>
						<div class="que cuPo" style="background: #616b74;" @click.stop="add_locker">取消</div>
					</div>
				</div>
			</div>
		</div>
		<!--  使用储物柜  -->
		<div v-if="uselocker_show" class="zhezhao wh100" />
		<div v-if="uselocker_show" v-loading="loading" class="zhezhaoN dis disAl disJuC wh100">
			<div class="poRel borRad10 bacFFF" style="width: 722px;">
				<div class="wid90 mar">
					<div class="wid100 dis disAl disJuB" style="padding: 30px 0 10px;">
						<div class="dis disAl">
							<div class="foSi20 fowe600 mar-right10">{{ uselocker_tips }}</div>
						</div>
						<svg-icon icon-class="guanbi" class="mar0 cuPo" style="color: #ACACAC;width: 24px;height: 24px;"
							@click.stop="clockuselock" />
					</div>
					<div class="" style="padding: 20px 0;">
						<el-form ref="ruleForm" :model="ruleForm" :rules="rules">
							<div class="dis disAl disJuB" style="flex-wrap: wrap">
								<div class="dis disAl disJuB hei44 itFor ites"
									style="background: #f2f2f2;width: 48%;padding: 0px 15px">
									<div style="margin-right: 20px;">
										<span class="foSi10" style="color: #ff0000;margin-right: 4px;">*</span>
										<span class="foSi14">状态</span>
									</div>
									<div>未使用</div>
								</div>
								<div class="dis disAl disJuB hei44 itFor ites"
									style="background: #f2f2f2;width: 51%;padding: 0px 15px">
									<div style="margin-right: 20px;">
										<span class="foSi10" style="color: #ff0000;margin-right: 4px;">*</span>
										<span class="foSi14">使用人手机号码</span>
									</div>
									<el-form-item class="mp0" style="width: 170px">
										<el-autocomplete v-model="useForm.address" :fetch-suggestions="querySearchAsync"
											placeholder="请输入手机号" @select="handleSelect" />
									</el-form-item>

								</div>
							</div>
						</el-form>
					</div>
					<div class="wid100 dis disAl disJuC foSi14 coFFF" style="padding: 20px 0 40px">
						<div class="mar-right20 que cuPo" style="background: #48a9f3;" @click.stop="submitForm2()">保存
						</div>
						<div class="que cuPo" style="background: #616b74;" @click.stop="clockuselock">取消</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		LockersList,
		LockersEdit,
		LockersDel,
		MemberList,
		LockersUse
	} from '@/api/brand'
	export default {
		name: 'Dashboard',
		data() {
			return {
				listQuery: {
					page: 1,
					limit: 0
				},
				list: [{
					number: 1,
					state: 0
				}],
				currentRole: 'adminDashboard',
				loading: false,
				// 预约
				tableData: [],
				multipleSelection: [],
				infos: {},
				brandlist: [],
				shuaVisible: false,
				showdel: false,
				uselocker_show: false,
				uselocker_tips: '',
				useForm: {
					member_id: '',
					address: '',
					id: '',
					type: 1
				},
				ruleForm: {
					id: null,
					numbers: 1
				},
				tips: {
					all: 0,
					use: 0,
					notuse: 0
				},
				rules: {
					numbers: [{
						required: true,
						message: '请输入数字编号',
						trigger: 'change'
					}]
				}
			}
		},
		computed: {
			...mapGetters([
				'roles'
			])
		},
		created() {
			if (!this.roles.includes('admin')) {
				this.currentRole = 'editorDashboard'
			}
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: [{
						name: '团课预约记录',
						url: '/dashboard',
						pd: true
					},
					{
						name: '私教预约记录',
						url: '/privateappointment',
						pd: true
					},
					{
						name: '爽约惩罚',
						url: '/punishment',
						pd: true
					},
					{
						name: '储物柜',
						url: '/locker',
						pd: true
					},
					{
						name: '请假管理',
						url: '/leavemanage',
						pd: true
					},
					{
						name: '班课上课记录',
						url: '/classrecord',
						pd: true
					}
				]
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 3
			})
			this.getdata()
		},
		methods: {
			// 搜索会员
			querySearchAsync(queryString, cb) {
				const params = {
					keyword: queryString
				}
				MemberList(params).then(response => {
					const {
						data
					} = response
					console.log(data)
					cb(data)
				}).catch(error => {
					console.log(error)
				})
			},
			// 选择使用储物柜用户
			handleSelect(item) {
				this.useForm.address = item.address
				console.log(item)
			},
			// 新增储物柜
			add_locker() {
				if (this.list.length > 0) {
					this.ruleForm.numbers = this.list[this.list.length - 1]['numbers'] + 1
				} else {
					this.ruleForm.numbers = 1
				}
				this.shuaVisible = !this.shuaVisible
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.loading = true
						const data = this.ruleForm
						LockersEdit(data).then(response => {
							const {
								data
							} = response
							console.log(data)
							this.shuaVisible = false
							this.loading = false
							this.getdata()
						}).catch(error => {
							console.log(error)
							this.loading = false
						})
					} else {
						this.$message.error('请按规则填写完整信息')
						return false
					}
				})
			},
			submitForm2() {
				if (this.useForm.member_id === '') {
					return this.$message({
						message: '请在搜索中选择会员',
						type: 'warning'
					})
				}
				this.loading = true
				const data = {
					member_id: this.useForm.member_id,
					id: this.useForm.id,
					type: this.useForm.type
				}
				console.log('请求数据', data)
				LockersUse(data).then(response => {
					const {
						data
					} = response
					console.log(data)
					this.uselocker_show = false
					this.loading = false
					this.getdata()
				}).catch(error => {
					console.log(error)
					this.loading = false
				})
			},
			del_locker(id) {
				console.log('请求储物柜')
				this.$confirm('是否删除该储物柜?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.loading = true
					const params = {
						id: id
					}
					LockersDel(params).then(response => {
						const {
							data
						} = response
						console.log('删除储物柜', data)
						this.getdata()
						this.loading = false
					}).catch(error => {
						console.log(error)
						this.loading = false
					})
				}).catch(() => {

				})
			},
			uselock(index) {
				this.ruleForm.member_id = this.list[index]['id']
				this.uselocker_show = !this.uselocker_show
				this.uselocker_tips = '储物柜 - ' + this.list[index]['numbers_text']
				this.useForm.type = this.list[index]['status'] === 0 ? 1 : 2
			},
			clockuselock() {
				this.uselocker_show = !this.uselocker_show
			},
			getdata() {
				console.log('请求储物柜')
				this.loading = true
				LockersList({}).then(response => {
					const {
						data
					} = response
					console.log('获取储物柜', data)
					this.list = data
					this.tips.all = this.list.length
					let use = 0
					let notuse = 0
					for (var i = 0; i < this.list.length; i++) {
						if (this.list[i]['status'] == 0) {
							notuse++
						} else {
							use++
						}
					}
					this.tips.use = use
					this.tips.notuse = notuse
					this.loading = false
				}).catch(error => {
					console.log(error)
					this.loading = false
				})
			}
		}
	}
</script>
<style>
	.greens {
		color: green;
	}

	.item2 {
		padding: 10px;
		width: 108px;
		height: 108px;
		background-color: #6b7cdd;
		color: #fff;
		align-items: center;
		margin-right: 10px;
		margin-bottom: 10px;
	}

	.ri {
		background-color: #fff;
		padding: 4px;
		height: 35px;
		border-radius: 20px;
		right: 10px;
	}

	.usebtn {
		background-color: #fff;
		color: #6b7cdd;
		padding: 5px 10px;
		font-size: 14px;
		border-radius: 5px;
	}
</style>